<template>
    <div class="footer-bar">
        <div class="bar-left" @click="goToCart">
            <div class="cart-wrapper">
                <image resize="cover" class="cart-img" :src="cartImg"></image>
                <text v-if="cartInfo.totalNum && cartInfo.totalNum > 0" class="cart-txt font-msyhl">{{cartInfo.totalNum > 99 ? '99+' : cartInfo.totalNum}}</text>
            </div>

            <text v-if="cartInfo.totalNum && cartInfo.totalNum > 0" class="cart-des font-msyhl">{{cartInfo.totalItems}}种商品</text>
        </div>

        <div class="bar-right">
            <div class="total-wrapper" v-if="cartInfo.totalNum && cartInfo.totalNum > 0">
                <text class="total-txt font-msyhl">合计：</text>
                <text class="total-price font-msyhl">{{cartInfo.totalCheckedMoney}}</text>
                <text class="total-txt total-discount font-msyhl">（不含运费）</text>
            </div>

            <btn-item v-if="cartInfo.totalCheckedNum && cartInfo.totalCheckedNum > 0" @btnClick="btnClick">结算({{cartInfo.totalCheckedNum}})</btn-item>
            <btn-item v-else :disabled="true">结算</btn-item>
        </div>
    </div>
</template>

<style scoped>
    .footer-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 1080px;
        height: 100px;
        background-color: #f2f2f2;
        opacity: 0.9;
        padding-left: 20px;
        padding-right: 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .bar-left {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .cart-wrapper {
        position: relative;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        width: 72px;
        height: 60px;
        margin-right: 4px;
    }
    .cart-img {
        width: 47px;
        height: 43px;
    }
    .cart-txt {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        border-radius: 20px;
        background-color: #e31336;
    }
    .cart-des {
        font-size: 28px;
        color: #313131;
    }
    .bar-right {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .total-wrapper {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-right: 12px;
    }
    .total-txt {
        font-size: 28px;
        color: #313131;
    }
    .total-price {
        font-size: 36px;
        color: #313131;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
    import btnItem from 'components/btn-item/btn-item.vue';
    import cartImg from 'assets/images/cart-icon.png';
    import storage from 'utils/storage';
    import modal from 'utils/modal';
    import navigator from 'utils/navigator';
    import route from 'constants/route';
    import constant from 'constants/constant';
    import cartService from 'services/cartService';

    export default{
        data(){
            return{
                cartImg: cartImg,
                cartInfo: {} //购物车信息对象
            }
        },
        created(){
            let self = this;
            storage.getItem('cartInfo').then(res=>{
                res = res || {};
                if(Array.prototype.toString.call(res) == "[object String]")  res = JSON.parse(res);
                self.cartInfo = res;
            });

            //监听购物车通用事件
            cartService.cartAddEventListener(res=>{
                self.cartInfo = res;
            });
        },
        methods: {
            /*结算*/
            btnClick(e) {
                let self = this;
                navigator.push({
                    url: route.confirm,
                    title: '确认订单',
                    params: {
                        from: 'fromCart'
                    }
                }, event => {
                    console.log('go to confirm...');
                });
            },
            /*去购物车*/
            goToCart(){
                let options = {
                    classType: constant.Pop_Class_Type,
                    url: route.cart,
                    title: '购物车'
                }
                navigator.push(options);
            }
        },
        components: {
            'btn-item' : btnItem
        },
        destroyed(){
            cartService.removeCartAddEventListener();
        }
    }
</script>
